<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sample</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
</head>

<body>

<!--main-->
<div class="container sample">
    <div class="panel panel-default">
        <div class="panel-heading">Get Task Status</div>
        <div class="panel-body">
            <div>
                <pre>API:http://127.0.0.1:3456/task/{task_id}</pre>
            </div>
            <form id="get_task_form" method="post" action="/task/" class="form-horizontal" role="form">
                <div class="form-group">
                    <div class="col-sm-6 f-body">
                        <input type="text" name="task_id" class="form-control" value="" placeholder="TASK ID" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-6 f-body">
                        <input type="submit" class="btn btn-primary" value="Submit">
                    </div>
                </div>
                <div class="form-group"><code></code></div>
            </form>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading">List SVNItem</div>
        <div class="panel-body">
            <div>
                <pre>API:http://127.0.0.1:3456/list</pre>
            </div>
            <form id="list_form" method="post" action="/list" class="form-horizontal" role="form">
                <div class="form-group">
                    <div class="col-sm-6 f-body">
                        <input type="submit" class="btn btn-primary" value="Submit">
                    </div>
                </div>
                <div class="form-group"><code></code></div>
            </form>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading">Add SVNItem</div>
        <div class="panel-body">
            <div>
                <pre>API:http://127.0.0.1:3456/add</pre>
            </div>
            <form id="add_form" method="post" action="/add" class="form-horizontal" role="form">
                <div class="form-group">
                    <div class="col-sm-6 f-body">
                        <input type="text" name="name" class="form-control" value="" placeholder="SVNItem's Name" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-6 f-body">
                        <input type="text" name="url" class="form-control" value="" placeholder="SVN URL" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-6 f-body">
                        <input type="text" name="user" class="form-control" value="" placeholder="SVN User" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-6 f-body">
                        <input type="text" name="pass" class="form-control" value="" placeholder="SVN Password" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-6 f-body">
                        <input type="text" name="remote" class="form-control" value="" placeholder="SSH Remote Path" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-6 f-body">
                        <input type="text" name="host" class="form-control" value="" placeholder="SSH Host with Port,Sample:127.0.0.1:22" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-6 f-body">
                        <input type="text" name="ssh_user" class="form-control" value="" placeholder="SSH user" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-6 f-body">
                        <input type="text" name="ssh_pass" class="form-control" value="" placeholder="SSH password" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-6 f-body">
                        <input type="text" name="host" class="form-control" value="" placeholder="SSH key" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-6 f-body">
                        <input type="submit" class="btn btn-primary" value="Submit">
                    </div>
                </div>
                <div class="form-group"><code></code></div>
            </form>
        </div>
    </div>
    
    <div class="panel panel-default">
        <div class="panel-heading">Edit SVNItem</div>
        <div class="panel-body">
            <div>
                <pre>API:http://127.0.0.1:3456/edit</pre>
            </div>
            <form id="edit_form" method="post" action="/edit/" class="form-horizontal" role="form">
                <div class="form-group">
                    <div class="col-sm-6 f-body">
                        <input type="text" name="name" class="form-control" value="" placeholder="SVNItem's Name" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-6 f-body">
                        <input type="text" name="url" class="form-control" value="" placeholder="SVN URL" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-6 f-body">
                        <input type="text" name="user" class="form-control" value="" placeholder="SVN User" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-6 f-body">
                        <input type="text" name="pass" class="form-control" value="" placeholder="SVN Password" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-6 f-body">
                        <input type="text" name="remote" class="form-control" value="" placeholder="SSH Remote Path" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-6 f-body">
                        <input type="text" name="host" class="form-control" value="" placeholder="SSH Host with Port,Sample:127.0.0.1:22" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-6 f-body">
                        <input type="text" name="ssh_user" class="form-control" value="" placeholder="SSH user" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-6 f-body">
                        <input type="text" name="ssh_pass" class="form-control" value="" placeholder="SSH password" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-6 f-body">
                        <input type="text" name="host" class="form-control" value="" placeholder="SSH key" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-6 f-body">
                        <input type="submit" class="btn btn-primary" value="Submit">
                    </div>
                </div>
                <div class="form-group"><code></code></div>
            </form>
        </div>
    </div>
    
    <div class="panel panel-default">
        <div class="panel-heading">Deploy</div>
        <div class="panel-body">
            <div>
                <pre>API:http://127.0.0.1:3456/deploy</pre>
            </div>
            <form id="deploy_form" method="post" action="/deploy/" class="form-horizontal" role="form">
                <div class="form-group">
                    <div class="col-sm-6 f-body">
                        <input type="text" name="name" class="form-control" value="" placeholder="SVNItem's Name" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-6 f-body">
                        <input type="submit" class="btn btn-primary" value="Submit">
                    </div>
                </div>
                <div class="form-group"><code></code></div>
            </form>
        </div>
    </div>
    
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
(function($){

    $('form').on('submit', function(e) {
        var $this = $(this), $url = $this.attr('action'), 
        $submit_btn = $this.find("input[type=submit]"), 
        default_method = "post",
        $code = $this.find("code");
        $code.hide();
        $submit_btn.attr("value", "loading");
        
        function after_submit() {
            $submit_btn.attr("value", "Submit");
            $this.data('submiting', "false");
            $code.show();
        }
        
        if ($this.data("submiting") == "true") {
            return;
        }
        $this.data('submiting', "true");
        
        if ($this.attr('id') == 'get_task_form') {
            $url = $url + $this.find("input[name=task_id]").val();
            default_method = "get";
        }
        if ($this.attr('id') == 'edit_form' || $this.attr('id') == 'deploy_form') {
            $url = $url + $this.find("input[name=name]").val();
        }
        
        $.ajax({
            url: $url,
            type: "post",
            dataType: "json",
            data : $this.serialize(),
            complete: function(xhr) {
                $code.text(xhr.responseText);
                after_submit();
                if ($this.attr('id') == 'deploy_form') {
                    var res = JSON.parse(xhr.responseText);
                    if (res["status"] && res["task_id"])
                    getTaskResult(res["task_id"])
                }
            }
        });
        
        function getTaskResult(task_id) {
            $.ajax({
                url: '/task/' + task_id,
                type: "get",
                dataType: "json",
                complete: function(xhr) {
                    var res = JSON.parse(xhr.responseText)
                    if (!res["status"] || (res["status"] && res["running"])) {
                        $code.text(xhr.responseText);
                        if (res["error"] && res["error"] != "") {
                            return
                        }
                        setTimeout(function(){getTaskResult(task_id)}, 1500);
                        return
                    }
                    if (res["status"] && !res["running"]) {
                        $code.text(xhr.responseText);
                        return
                    }
                }
            });
        }
        
        console.log($this.serializeArray())
        
        return false;
    });
   
})(jQuery)
</script>
</body>
</html>
